<template>
  <el-dialog
    :visible.sync="$attrs.visable"
    width="760px"
    title="修改标签"
    :before-close="handleClose"
    append-to-body
  >
    <div class="labelcard">
      <div class="labelheader flexbetween c_text2">
        <el-input
          placeholder="搜索标签/标签组"
          v-model="queryParams.keyword"
          size="small"
          class="searchinput"
          @keyup.enter.native="handleQuery"
        >
          <el-button
            slot="append"
            size="small"
            icon="el-icon-search"
          ></el-button>
        </el-input>
        <div class="f-14 c_text">
          <el-switch
            v-model="isSelcted"
            inactive-color="#B7B7B7"
            class="smallswitch"
          >
          </el-switch>
          仅显示已选中标签
        </div>
      </div>
      <div class="labelbody">
        <div class="checkgroup" v-for="(item,index) in treeList" :key="index">
          <div>
            <el-checkbox
              :indeterminate="item.isIndeterminate"
              v-model="item.checked"
              @change="handleCheckAllChange"
            >
              反倒是
            </el-checkbox>
          </div>
          <div class="flex">
            <span v-for="(child,cindex) in item.children" :key="cindex" class="labelname commhover mr-8" :class="{active:child.checked}">{{child.label}}</span>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >发 布</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isSelcted: false,
      queryParams: {
        keyword: "",
      },
      treeList:[
        {label:'分组一',id:1, checked:false, isIndeterminate:false, children:[{id:2, label:'标签一',checked: true},{id:3, label:'标签二',checked: false}]},
        {label:'分组二',id:5, checked:false, isIndeterminate:false, children:[{id:6, label:'标签一',checked: true},{id:7, label:'标签二',checked: false}]}
      ],
    };
  },
  props: {},
  created() {},
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleQuery() {},
  },
};
</script>
<style lang="scss" scoped>
.labelcard {
  border: 1px solid #e9e9e9;
}
.labelheader {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e9e9e9;
  padding: 12px 16px;
}
.searchinput {
  width: 200px;
  ::v-deep .el-input-group__append {
    padding: 0 14px;
    background-color: #fff;
  }
}
.checkgroup {
  padding: 16px 16px 0;
}
.labelbody {
  height: 370px;
  padding-bottom: 12px;
  overflow-y: auto;
}
.labelname {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  color: #222;
  padding: 5px 12px;
  transition: all 0.3s;

  &.active {
    color: #fff;
    background: #2f54eb;
  }
}
</style>